<template>
  <view class="context">
    <view class="for_item">
      <view class="for_text texts">联系人</view>
      <input v-model="name" placeholder-class="placeholder" type="text" placeholder="请填写联系人姓名" />
    </view>
    <view class="for_item">
      <view class="for_text texts">手机号</view>
      <input v-model="tel" placeholder-class="placeholder" type="number" :maxlength="11" placeholder="请填写联系人手机号" />
    </view>
    <view class="for_item">
      <view class="for_text texts">省市区</view>
      <view style="flex: 1" @tap="open">
        <view class="location" v-show="!region">选择省市区</view>
        <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
          @cancel="cancel" :visible="visible" />
        <view v-show="region">{{ region }}</view>
      </view>
    </view>
    <view class="for_item">
      <view class="for_text" style="letter-spacing: 50rpx">地址</view>

      <view style="flex: 1" @click="location">
        <view class="location" v-show="!newAddress">点击选择位置</view>
        <view v-show="newAddress">{{ arrName }}</view>
        <view v-show="newAddress" style="margin-top: 15rpx; color: #909399; font-size: 26rpx">{{ newAddress }}
        </view>
      </view>
    </view>
    <view class="for_item">
      <view class="for_text">具体地址</view>
      <input v-model="address" placeholder-class="placeholder" type="text" placeholder="例如: 恒大帝景2号楼605" />
    </view>
    <view @click="saveAddress" class="btns">保存地址</view>
    <view v-show="id" @click="deleteAdd" class="deleteBtn">删除</view>
    <view class="waring">
      <view class="titlea">因抖音兼容性问题，如无法正常填写信息，请升级抖音 APP
        到最新版本或者联系客服人员（客服电话）</view>
      <view class="phone" :style="{ display: 'flex', justifyContent: 'center' }">
        <view class="anniuphone" @click="phoneCall(item.number)" v-for="item in phoneList" :key="item.id">
          <image src="@/static/image/home/dianhua2.png" mode="scaleToFill" />
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import cityPicker from "@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker";
import { getAddAddress, getDelAddress, getPhone } from "@/api/home.js";
import env from "@/utils/env.js";
export default {
  data() {
    return {
      visible: false,
      maskCloseAble: true,
      str: "",
      defaultValue: "110101",
      column: 3,
      id: "",
      name: "",
      tel: "",
      address: "",
      region: "",
      newAddress: "",
      arrName: "",
      latitude: "",
      longitude: "",
      phoneList: [],
    };
  },
  components: {
    cityPicker,
  },
  onLoad(option) {
    if (option.item) {
      const item = JSON.parse(decodeURIComponent(option.item));
      this.id = item.id;
      this.address = item.address;
      this.name = item.name;
      this.region = item.city;
      this.tel = item.tel;
      this.arrName = item.title;
      this.newAddress = item.address_title;
      this.latitude = item.latitude;
      this.longitude = item.longitude;
    }
    this.getPhone();
  },
  methods: {
    open() {
      this.visible = true;
      if (this.region) {
        // 将 region 拆分成数组作为默认值
        this.defaultValue = this.region.split("/");
      } else {
        this.defaultValue = "110101";
      }
    },
    confirm(val) {
      this.visible = false;
      this.region = `${val.provinceName}/${val.cityName}/${val.areaName}`;
    },
    cancel() {
      this.visible = false;
    },
    location() {
      tt.chooseLocation({
        success: (real) => {
          this.longitude = real.longitude;
          this.latitude = real.latitude;
          this.arrName = real.name;
          this.newAddress = real.address;
        },
        fail: (arr) => {
          if (arr.errNo === 10200) {
            uni.openSetting({
              success: (res) => {
                if (res.authSetting["scope.userLocation"] === false) {
                  this.$showToast("请授权地理位置");
                }
              },
            });
          }
        },
      });
    },
    phoneCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber,
      });
    },
    getPhone() {
      getPhone({}).then((res) => {
        this.phoneList = res.data.hotlineList;
      });
    },
    // 删除地址
    deleteAdd() {
      uni.showModal({
        title: "提示",
        content: "确定要删除当前地址吗?",
        success: (res) => {
          if (res.confirm) {
            getDelAddress({
              id: this.id,
            }).then((res) => {
              if (res.code === 1) {
                this.$showToast("删除成功!");
                setTimeout(() => {
                  uni.navigateBack();
                }, 500);
              } else {
                this.$showToast(res.msg);
              }
            });
          }
        },
      });
    },
    // 保存地址
    saveAddress() {
      if (!this.name) {
        this.$showToast("请填写姓名");
        return false;
      }
      if (!this.$checkPhone(this.tel)) {
        this.$showToast("请填写正确手机号");
        return false;
      }
      if (!this.newAddress) {
        this.$showToast("请选择地址");
        return false;
      }
      if (!this.address) {
        this.$showToast("请填写具体地址");
        return false;
      }
      let obj = {
        name: this.name,
        tel: this.tel,
        city: this.region,
        address: this.address,
        title: this.arrName || this.address,
        address_title: this.newAddress,
        longitude: this.longitude,
        latitude: this.latitude,
      };
      if (this.id) {
        obj.id = this.id;
      }
      getAddAddress(obj).then((res) => {
        if (res.code === 1) {
          this.$showToast(this.id ? "修改成功" : "添加成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        } else {
          this.$showToast(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deleteBtn {
  background-color: #f5c71c;
  color: #010000;
  font-size: 28rpx;
  text-align: center;
  width: 340rpx;
  padding: 20rpx 0;
  border-radius: 50rpx;
  margin: 52rpx auto 0 auto;
}

.btns {
  padding: 30rpx 0;
  background-color: #f5c71c;
  color: #010000;
  font-size: 30rpx;
  text-align: center;
  border-radius: 60rpx;
  margin-top: 40rpx;
}

.context {
  padding-top: 20rpx;
}

.dwelling {
  padding: 40rpx;
  background-color: #fff;
  margin-top: 20rpx;

  .title {
    color: #1c1c1c;
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
  }

  .dwe_context {
    display: flex;
    flex-wrap: wrap;

    .residc {
      background-color: #f5c71c !important;
    }

    text {
      padding: 10rpx 25rpx;
      border-radius: 10rpx;
      background-color: #eeeef0;
      color: #7a7a7a;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      font-size: 30rpx;
    }
  }
}

.waring {
  padding: 40rpx;
  margin-top: 40rpx;
  background: #fff;
  font-size: 28rpx;
  padding-top: 20rpx;

  .titlea {
    color: red;
  }

  .phone {
    padding-top: 40rpx;
    justify-content: space-between;
  }

  .anniuphone {
    align-items: center;
    display: flex;
    padding: 12rpx 20rpx;
    border-radius: 76rpx;
    text-align: center;
    font-weight: bold;
    margin-top: 4rpx;
    background: #ff9900;
    color: white;

    image {
      width: 35rpx;
      height: 35rpx;
      margin-right: 20rpx;
    }
  }
}

.for_item {
  padding: 40rpx;
  background-color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #f5f5f5;

  .location {
    color: #737373;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /deep/ .placeholder {
    color: #bdbdbd;
  }

  .texts {
    letter-spacing: 15rpx;
  }

  .for_text {
    width: 160rpx;
    color: #737373;
  }

  .regions_text {
    color: #bdbdbd;
  }

  input {
    flex-grow: 1;
  }
}
</style>